<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>v-model checkbox复选框</title>
  <script src="/js/vue.js"></script>
</head>
<body>
  <div id="app">
    <!-- 复选框单独使用和组合使用 -->
    <!-- 复选框单独使用时候，v-model绑定的是布尔值，选中为true，未选中为false -->

    <!-- 第一种，为单个复选框 -->
    <label for="license">
        <input type="checkbox" id="license" v-model="isAgree">同意协议
    </label>
    <p>您的选择是{{isAgree}}</p>
    <button :disabled="!isAgree">下一步</button>
    <br>
    <br>
    <!-- 第二种，多个复选框  -->
    <!-- 复选框，一起使用的时候，绑定的是一个数组，选中复选框内容就会保存到数组中 -->
    <input type="checkbox" v-model="hobbies" value="篮球">篮球
    <input type="checkbox" v-model="hobbies" value="足球">足球
    <input type="checkbox" v-model="hobbies" value="唱">唱
    <input type="checkbox" v-model="hobbies" value="跳">跳
    <input type="checkbox" v-model="hobbies" value="rap">rap
    <input type="checkbox" v-model="hobbies" value="背带裤">背带裤

    <h2>你的爱好是{{hobbies}}</h2>
  </div>
<br>
  <script>
    let app = new Vue({
      el:"#app",
      data:{ 
        isAgree:false,
        hobbies:[]
      }
    })
  </script>
</body>
</html>